$(function(){
	loadList();
	$(".song-list")[0].addEventListener('selectstart',function(e) {
			e.preventDefault();
		})
	// 歌单展示
	$(".create-list").click(function(){
		$(".create-list-content").toggle();
		$(this).children(".triangle-down,.triangle-right").toggle();
		window.getSelection? window.getSelection().removeAllRanges() : document.selection.empty();
	})

	// 创建歌单
	// 弹出创建歌单窗口
	$(".create-list a").click(function(e){
		// 阻止冒泡，防止展开关闭歌单列表
		e.stopPropagation();
		$(".create-newlist").show()
	})
	// 点击取消关闭创建歌单窗口
	$(".create-newlist").on("click",".create-newlist-cancelbutton",function(){
		$(this).parent().hide();
	})
	$(".create-newlist-surebutton").on("click",function(){
		// 如果文本框内容不为空，则创建同名歌单
		if($(".create-newlist-name input").val() !== '') {
			// 获取歌单列表
			var list = getList();
			// 更新歌单列表
			list.push($(".create-newlist-name input").val());
			// 储存更新后的歌单列表
			setList(list);
			// 渲染歌单列表 渲染时同时渲染歌单界面
			loadList();
			// 清空创建歌单的文本内容
			$(".create-newlist-name input").val('');
			// 创建后关闭创建歌单窗口
			$(this).parent().hide();
		}
	})

	// 歌单点击效果
	$(".create-list-content").on("click","li",function(){
		// 歌单点击时背景加深
		$(this).css({"background-color":"#eee"}).siblings("li").css({"background-color":"#F9F9F9"});
		// 展示当前点击的歌单的界面
		$(".music-list-ui ul").eq($(this).index()).show().addClass('currentList').siblings('ul').hide().removeClass('currentList');
	})

	// 获取歌单函数
	function getList() {
		var list = localStorage.getItem("songList");
		list = JSON.parse(list);
		if(list === null) {
			return [];
		} else {
			return list;
		}
	}
	// 设置歌单函数
	function setList(newlist) {
		localStorage.setItem("songList",JSON.stringify(newlist));
	}

	// 渲染歌单函数
	function loadList() {
		// 最喜欢的歌单为默认存在的
		$(".create-list-content").html("<li><div class='album-cover fl'></div><div class='album-message fl'><p class='album-title'>我最喜欢的音乐</p><p class='album-song-number'>0首</p></div></li>")
		// 获取歌单列表
		var list = getList();
		// 获取歌单界面列表
		var UI = getUI();
		// 清空，防止重复渲染
		UI = [];
		list.forEach(function(value,index){
			// 渲染歌单列表
			var li = $("<li><div class='album-cover fl'></div><div class='album-message fl'><p class='album-title'>"+ value +"</p><p class='album-song-number'>0首</p></div></li>");
			$(".create-list-content").append(li);
			// 更新 有几个新建歌单，就有几个歌单界面，每个"UI"代表一个界面
			UI.push("UI");
			setUI(UI);
		})
		// 更新创建的歌单的数目
		$(".create-list .number").text(list.length + 1);
		// 渲染歌单界面
		loadUI();
	}

	// 获取歌单音乐界面函数
	function getUI() {
		var UI = localStorage.getItem("musicUI");
		UI = JSON.parse(UI);
		if(UI === null) {
			return [];
		} else {
			return UI;
		}
	}

	// 设置歌单音乐界面函数
	function setUI(newUI) {
		localStorage.setItem("musicUI",JSON.stringify(newUI));
	}

	

	// 渲染歌单音乐界面函数
	function loadUI() {
		// 最喜欢的歌单界面也是默认存在
		$(".music-list-ui").html("<ul class='music-list-option currentList'></ul>");
		var UI = getUI();
		// 遍历渲染歌单界面 并且都关闭
		UI.forEach(function(value,index){
			var ul = "<ul class='music-list-option newone'></ul>";
			$(".music-list-ui").append(ul);
			$(".music-list-ui").children(".newone").hide();
		})
		// 渲染每个歌单里的音乐
		loadMusic();
		// 设置点击播放功能
		$(".music-list-option").on("click",".little-player-button",function(){
				// 除了点击播放的歌曲的其他歌都去除播放标记以及改变按钮颜色
				$(this).parent().siblings().find('audio,i').removeClass('currentPlay');
				$(this).parents('.music-list-option').siblings().find('audio,i').removeClass('currentPlay');
				// 当前点击的歌曲添加播放标记
				$(this).addClass('currentPlay').siblings('audio').addClass('currentPlay');
				if($(".player-control").hasClass('play-click')){
					$(".player-control").removeClass('play-click').addClass('pause-click');
				}
				// 确认当前是否在播放音乐
				if(musicPlaying[0]) {
							musicPlaying[0].pause();
				}
				// 遍历所有歌曲
				$("audio").each(function(index,ele){
					// 如果没有播放标记则暂停
					if($(this).hasClass('currentPlay')) {
						// 为了防止加入音乐时重新载入歌单界面导致音乐播放暂停，所以将播放的音乐单独存放 
						// 存放音乐对象
						// musicPlaying[0] = document.createElement("audio");
						musicPlaying[0].src = $(this).prop("src");
						// 存放所在歌单索引值
						musicPlaying[1] = $(this).parents(".music-list-option").index();
						// 存放音乐的索引值
						musicPlaying[2] = $(this).parent().index();
						// 播放音乐
						musicPlaying[0].play();
						// console.log(musicPlaying);
					}
				})
				console.log(musicPlaying);

				musicPlaying[0].onplay =  function(){
					var time = getTime(this.duration);
					$(".totalPlayMusicTime").text(time);
					var music = JSON.parse(localStorage.getItem("music"));
					$(".currentPlayMusicTitle").text(music[musicPlaying[1]][musicPlaying[2]].name);
				}

				musicPlaying[0].oncanplay =  function(){
					var time = getTime(this.duration);
					$(".totalPlayMusicTime").text(time);
					var music = JSON.parse(localStorage.getItem("music"));
					$(".currentPlayMusicTitle").text(music[musicPlaying[1]][musicPlaying[2]].name);
				}

				musicPlaying[0].ontimeupdate = function(){
					var time = getTime(this.currentTime);
					$(".currentPlayMusicTime").text(time);
					var left = this.currentTime / this.duration * $(".progressBar").width();
					$(".play-btn").css({"left":left});
				}		
		})
		// 设置删除音乐功能
		$(".music-list-option").on("click",".delete-key",function(){
			// 获取音乐所在歌单
			var listIndex = $(this).parents(".music-list-option").index();
			// 获取音乐序数
			var musicIndex = $(this).parent().index();
			var music = getMusic();
			// 删除储存数据中的对应音乐
			music[listIndex].splice(musicIndex,1);
			setMusic(music);
			loadMusic();
		})
	}

	// 添加音乐按钮
	$(".uploadMusic").change(function(){
		// 获取不带格式的音乐的名字
		var name = this.files[0].name.substr(0,this.files[0].name.length - 4);
		// 获取地址 注意：浏览器从本地存储读取赋予地址时会自动在前面加上该js所链接的html页面的路径
		var url = "uploadMusic/" + this.files[0].name;
		// 获取该音乐时长
		var musicTime;
		var uploadAudio = $("<audio src='" + url + "'></audio>");
		uploadAudio[0].ondurationchange = function() {
			musicTime = getTime(this.duration);
			var music = getMusic();
			var check = true;
			music[$(".music-list-option.currentList").index()].forEach(function(value,index){
				if(value.src == url) {
					check = false;
				}
			})
			if(check) {
				music[$(".music-list-option.currentList").index()].push({"src":url,"name":name,"totalTime":musicTime});
				setMusic(music);
				loadMusic();
			}	 
		}
		// 获取音乐列表 存储格式 [[{src:,name:}],[],[]] 每个子数组代表一个歌单 每个子对象代表该歌单里的每一首歌，存储了名字和地址
		// var music = getMusic();
		// 给当前展示的歌单添加音乐
		// music[$(".music-list-option.currentList").index()].push({"src":url,"name":name,"totalTime":musicTime});
		// 储存音乐信息
		// setMusic(music);
		// 渲染音乐列表
		// loadMusic(); 
			})

	// 获取音乐列表
	function getMusic(){
		var music = localStorage.getItem("music");
		music = JSON.parse(music);
		if(music === null) {
			// 有多少个歌单，就push多少个数组
			var arr = [];
			for(var i = 0;i < $(".music-list-option").length;i++) {
				arr.push([]);
			}
			return arr;
		} else if(music.length !== $(".music-list-option").length) {
			// 导入歌曲后再创建新歌单导入音乐时找不到对应数组的情况
			for(var i = music.length;i < $(".music-list-option").length;i++) {
				music.push([]);
			}
			return music;
		} else {
			return music;
		}
	}

	// 设置音乐列表
	function setMusic(mymusic) {
		localStorage.setItem("music",JSON.stringify(mymusic));
	}

	// 渲染音乐列表函数
	function loadMusic() {
		// 遍历每个歌单分别渲染其中音乐
		$(".music-list-option").each(function(opindex,ele){
			// opindex：歌单的索引号  ele：歌单对象
			// 获取当前歌单音乐列表
			var musiclist = getMusic();
			var music = musiclist[opindex];
			// 当前歌单音乐列表清空
			$(ele).html('');
			// 开始渲染音乐列表
			music.forEach(function(value,index){
					// value:当前音乐的信息 index:当前音乐的序数
					var currentAudio = $("<audio src='" + value.src + "'></audio>");
					// 设置时长变量
					var time;
					// audio的很多事件都是异步的 音乐加载速度慢 所以来不及获取时长就渲染了
					var li = $("<li><audio src='" + value.src + "'></audio><span class='song-number fl'>" + index + "</span><i class='little-player-button fl'></i><span class='music-name'>" + value.name + "</span><span class='music-duration'>" + value.totalTime + "</span><span class='singer-name'></span><span class='album-name'></span><a href='JavaScript:;' class='delete-key'>删除</a></li>");
					$(ele).append(li);
			})
		})
	}
})